<template>
  <!-- 标的要素 -->
  <div>
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800] text-[16px] font-bold">标的要素</div>
      </div>
    </div>
    <el-form-item
      label="项目名称"
      prop="name"
      v-if="bx_id == '2' || bx_id == '7' || bx_id == '19' || bx_id == '24'"
    >
      <el-input
        :disabled="disabled"
        placeholder="请输入项目名称"
        style="width: 580px"
        class=""
        v-model="Info.name"
      ></el-input>
    </el-form-item>

    <el-form-item label="面积" v-if="bx_id == '22'">
      <el-input
        :disabled="disabled"
        placeholder="请输入施工面积"
        v-model="Info.num"
        style="width: 318px"
        class="w-[318px]"
      ></el-input>
    </el-form-item>

    <el-form-item label="工程造价" prop="name" v-if="bx_id == '7'">
      <el-input
        :disabled="disabled"
        placeholder="请输入工程造价"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="设备造价" prop="name" v-if="bx_id == '19'">
      <el-input
        :disabled="disabled"
        placeholder="请输入设备造价"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="工程类别 " prop="name" v-if="bx_id == '2'">
      <el-input
        :disabled="true"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.classify"
      ></el-input>
    </el-form-item>

    <el-form-item label="项目编号" v-if="false">
      <el-input
        :disabled="disabled"
        placeholder="请输入项目编号"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.code"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="工程地址"
      prop="name"
      v-if="
        bx_id == '7' ||
        bx_id == '8' ||
        bx_id == '19' ||
        bx_id == '20' ||
        bx_id == '24' ||
        bx_id == '22'
      "
    >
      <div class="flex w-full">
        <div class="flex w-[180px]">
          <el-select v-model="Info.province" :disabled="disabled">
            <!-- <el-option
              :disabled="disabled"
              @click="handleProvinceSelect(item)"
              v-for="item in regionData"
              :label="item.label"
              :value="item.value"
            /> -->
          </el-select>
          <div class="ml-[5px] whitespace-nowrap">省/直辖市</div>
        </div>
        <!-- :disabled="!address!.province || cityList!.length == 0" -->
        <div class="ml-[60px] flex w-[150px]">
          <el-select v-model="Info.city" :disabled="!Info.province || disabled">
            <!-- <el-option
              @click="handleCitySelect(item)"
              v-for="item in cityList"
              :label="item.label"
              :value="item.label"
            /> -->
          </el-select>
          <span class="ml-[5px]">市</span>
        </div>
        <div class="ml-[60px] flex w-[150px]">
          <el-select
            v-model="Info.area"
            :disabled="
              !Info!.province || !Info!.city || disabled
            "
          >
            <!-- <el-option
              @click="handleAreaSelect(item)"
              v-for="item in areaList"
              :label="item.label"
              :value="item.value"
            /> -->
          </el-select>
          <span class="ml-[5px]">区</span>
        </div>
      </div>
    </el-form-item>
    <el-form-item
      label="详细地址"
      prop="name"
      v-if="
        bx_id == '2' ||
        bx_id == '7' ||
        bx_id == '19' ||
        bx_id == '20' ||
        bx_id == '24' ||
        bx_id == '22'
      "
    >
      <el-input
        :disabled="disabled"
        placeholder="请输入工程地址"
        style="width: 580px"
        class="mr-[5px]"
        v-model="Info.address"
      ></el-input>
      <span v-if="bx_id != '20' && bx_id != '24'">-</span>
      <el-input
        v-if="bx_id != '20' && bx_id != '24'"
        :disabled="disabled"
        placeholder="请输入铺位号、具体点位或店铺名称"
        style="width: 318px"
        class="w-[318px] ml-[5px]"
        v-model="Info.room_no"
      ></el-input>
    </el-form-item>
    <el-form-item label="人员人数 " prop="name" v-if="bx_id == '2'">
      <el-input
        :disabled="disabled"
        placeholder="请输入人员人数"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.num"
      ></el-input>
    </el-form-item>
    <el-form-item label="工期" prop="name" v-if="bx_id == '2'">
      <el-input
        :disabled="disabled"
        placeholder="请输入工期"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.age"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item label="开始时间 " prop="name">
      <el-date-picker
        :disabled="disabled"
        v-model="Info.start_date"
        type="date"
        placeholder="请选择开始时间"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChange($event, 1)"
      />
    </el-form-item> -->
    <!-- <el-form-item label="结束时间 " prop="name">
      <el-date-picker
        :disabled="disabled"
        v-model="Info.end_date"
        placeholder="请选择结束时间"
        type="date"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChange($event, 2)"
      />
    </el-form-item> -->

    <!-- <el-form-item label="方案" prop="name">
      <el-select v-model="Info.fanan">
        <el-option
          v-for="item in fananList"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="房屋建筑结构" prop="name" v-if="route.query.id != 1">
      <el-input
        placeholder="请选择房屋建筑结构"
        v-model="Info.structure"
        style="width: 318px"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->

    <!--   <el-form-item label="项目所在地" prop="name" v-if="route.query.id != 1">
      <div class="flex">
        <div>
          <el-select v-model="Info.province" @change="handleProvinceSelect">
            <el-option
              v-for="item in regionData"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">省/直辖市</span>
        </div>
       
        <div class="ml-[60px]">
          <el-select
            v-model="Info.city"
            :disabled="!Info.province || cityList!.length == 0"
            @change="handleCitySelect"
          >
            <el-option
              v-for="item in cityList"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">市</span>
        </div>
        <div class="ml-[60px]">
          <el-select
            v-model="Info.area"
            :disabled="
              !Info!.province || !Info!.city || areaList!.length == 0
            "
            @change="handleAreaSelect"
          >
            <el-option
              v-for="item in areaList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="ml-[5px]">区</span>
        </div>
      </div>
    </el-form-item> -->

    <!-- <el-form-item label="施工详细地址" prop="name">
      <el-select v-model="Info.address" @change="seleceChange">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>

  
    </el-form-item> -->

    <!-- <el-form-item label="商铺号/房间号" prop="name">
      <el-input
        placeholder="请输入商铺号/房间号"
        style="width: 318px"
        v-model="Info.room_no"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->
    <!-- <el-form-item label="职业类别" prop="name" v-if="route.query.id == 1">
      <el-select v-model="Info.address">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>
    </el-form-item> -->
  </div>
</template>
<script setup lang="ts">
import {
  defineProps,
  PropType,
  defineExpose,
  defineEmits,
  reactive,
  ref,
  watchEffect,
  computed,
  ComputedRef,
} from "vue";
// import { codeToText } from "element-china-area-data";
import { homeGetAddress } from "@/utils/api";
// import { regionData } from "element-china-area-data";
import { useRoute } from "vue-router";
const props = defineProps({
  treetop: { type: Object }, //数据回显
  fananList: { type: Array },
  disabled: { type: Boolean, default: false },
  bx_id: { type: String },
});
// interface CityList {
//   label: string;
//   value: string;
// }
interface infoType {
  name: string;
  address: string;
  age: string;
  code: string;
  start_date: string;
  end_date: string;
  classify: string;
  num: string;
  room_no?: string;
  price?: string;
  province?: string;
  city?: string;
  area?: string;
}
const Info = reactive<infoType>({
  name: "",
  address: "",
  age: "",
  code: "",
  start_date: "",
  end_date: "",
  classify: "室内装修",
  num: "",
  room_no: "",
  price: "",
  province: "",
  city: "",
  area: "",
});
const route = useRoute();
const arrressList = ref([] as any[]);
const fananList = ref([] as any[]);
// interface AreaList {
//   label: string;
//   value: string;
// }
// interface RegionData {
//   label: string;
//   value: string;
// }

watchEffect(() => {
  if (props.treetop) {
    let key: keyof infoType;
    for (key in Info) {
      Info[key] = props.treetop[key];
    }
    Info.classify = "室内装修";
    console.log(Info);
  }
  if (props.fananList) {
    fananList.value = props.fananList;
  }
});
const getData = async () => {
  const res = await homeGetAddress("");
  // console.log(res);
  arrressList.value = res.msg;
};
getData();
//选择时间
const pickerChange = (v: any, index: number) => {
  //1是开始时间 2是结束时间
  console.log(v, index);
};
//抛出地址
// const emit = defineEmits<{
//   (
//     e: "getAddress",
//     data: {
//       code: string[]; //区域码
//       name: string[]; //汉字
//       isComplete: boolean; //是否选择完整，方便校验
//     }
//   ): void;
//   (e: "handleProvinceSelect"): void;
//   (e: "handleCitySelect"): void;
//   (e: "handleAreaSelect"): void;
// }>();

// const handleProvinceSelect = (_: any) => {
//   emit("handleProvinceSelect");
//   emit("getAddress", {
//     code: [props.address?.province], //区域码
//     name: [codeToText[props.address?.province]], //汉字
//     isComplete: false,
//   });
// };
// const handleCitySelect = () => {
//   emit("handleCitySelect");
//   emit("getAddress", {
//     code: [props.address?.city], //区域码
//     name: [codeToText[props.address?.city]], //汉字
//     isComplete: false,
//   });
// };
// const handleAreaSelect = () => {
//   emit("handleAreaSelect");
//   emit("getAddress", {
//     code: [props.address?.province, props.address?.city, props.address?.area], //区域码
//     name: [
//       codeToText[props.address?.province],
//       codeToText[props.address?.city],
//       codeToText[props.address?.area],
//     ], //汉字
//     isComplete: true,
//   });
//   Info.province = codeToText[props.address?.province];
//   Info.city = codeToText[props.address?.city];
//   Info.area = codeToText[props.address?.area];
// };
// const address = reactive<{
//   province: string;
//   city: string;
//   area: string;
// }>({
//   province: "",
//   city: "",
//   area: "",
// });
// interface AreaList {
//   value: string;
//   label: string;
//   children?: AreaList[];
// }
//切换省份函数
// const handleProvinceSelect = () => {
//   // address.city = "";
//   // address.area = "";
//   Info.city = "";
//   Info.area = "";
// };
// const getAddress = ({
//   name,
// }: {
//   code: string[];
//   name: string[];
//   isComplete: boolean;
// }) => {
//   console.log(name);
// };

//二级城市列表
// const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
//   if (!Info.province) {
//     return [];
//   }

//   let temp = regionData.find((item: any) => {
//     return item.label == Info.province;
//   });

//   return temp!.children ? temp!.children : [];
// });
// const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
//   if (!Info.province || !Info.city) {
//     return [];
//   }
//   if (cityList.value.length == 0) {
//     return [];
//   } else {
//     //  console.log(cityList.value);

//     let temp = cityList.value.find((item: any) => {
//       return item.label == Info.city;
//     });

//     if (temp) {
//       console.log(temp);

//       return temp.children ? temp.children : [];
//     } else {
//       return [];
//     }
//   }
// });

//详细地址选中
// const seleceChange = (v: any) => {
//   Info.address_id = v.id;
//   Info.address = v.address;
// };
defineExpose({
  //   handleProvinceSelect,
  Info,
});
</script>
